<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="Totomo">
  <meta name="Keywords" content="picture">
  <meta name="Description" content="pic_roll">
  <title>图片滚动</title>
  <script type="text/javascript">
	var index=0;//每张图片的下标，

	window.onload=function(){       
		var start=setInterval(autoPlay,2000);//开始轮播，每2秒换一张图

		$('imgchangediv').onmouseover=function(){//当鼠标光标停在图片上，则停止轮播
			clearInterval(start);
		}
		$('imgchangediv').onmouseout=function(){//当鼠标光标停在图片上，则开始轮播
			start=setInterval(autoPlay,2000);
		}

		var lis=$('imgyuan').getElementsByTagName('font');//得到所有圆圈
		//当移动到圆圈，则停滞对应的图片
		var funny = function(i){
			lis[i].onmouseover = function(){
				changeImg(i)
			}
		}
		for(var i=0;i<lis.length;i++){
			funny(i);
		}
	}
	function $(value){
		return document.getElementById(value)
	}
	//一轮过后，还是第二轮
	function autoPlay(){
		if(index>7){
			index=0;
		}
		changeImg(index++);
	}
	//对应圆圈和图片同步
	function changeImg(index){
		var list=$('imgchangediv').getElementsByTagName('img');
		var list1=$('imgyuan').getElementsByTagName('font');
		for(i=0;i<list.length;i++){
			list[i].style.display='none';
			list1[i].style.backgroundColor='white';
		}
		list[index].style.display='block';
		list1[index].style.backgroundColor='red';
	}
  </script>
  <style type="text/css">
	/* 小圆点后面的背景条 */
	#imgyuan{
		width: 800px;
		height: 640px;
		border-radius: 12px;
		background-color: red;
		padding-left: 13px;
		margin: 0 auto;
		position: relative;
		top: -40px;
		background-color:transparent;
	}
	/*小圆点*/
	#imgyuan font{
		border:1px solid white;
		width:11px; 
		height:11px;
		border-radius:50%;
		margin-right: 9px;
		margin-top: 4px;
		display: block;
		float: left;
		background-color: transparent;
	}
	#imgchangediv img{
		width: 800px;
		height: 440px;
	}
  </style>
 </head>
 <body>
	<div id="imgchangediv" align="center">
		<img src="a1.jpg" style="display: block;"/>
		<img src="a2.jpg" style="display: none;"/>
		<img src="a3.jpg" style="display: none;"/>
		<img src="a4.jpg" style="display: none;"/>
		<img src="a5.jpg" style="display: none;"/>
		<img src="a6.jpg" style="display: none;"/>
		<img src="a7.jpg" style="display: none;"/>
		<img src="a8.jpg" style="display: none;"/>
		<div id="imgyuan">
			<font></font>
			<font></font>
			<font></font>
			<font></font>
			<font></font>
			<font></font>
			<font></font>
			<font></font>
		</div>
	</div>
 </body>
</html>
